<template>
  <div class="card-list" ref="content">
    <a-list
      :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
      :dataSource="dataSource"
    >
      <a-list-item slot="renderItem" slot-scope="item, index">
        <template v-if="index === 0">
          <a-button class="new-btn" type="dashed" @click="handleAdd" >
            <a-icon type="plus"/>
            新增设备
          </a-button>
        </template>
        <template v-else>
          <a-card :hoverable="true">
            <a-card-meta>
              <div style="margin-bottom: 3px" slot="title">{{ item.name }}</div>
                <a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large"/>
              <div class="meta-content" slot="description">
                <div>
                  <span>所属灯杆：{{item.lightPoleId_dictText }}</span><br/>
                  <span>设备类型：{{item.deviceType_dictText }}</span>
                </div>
                <div style="margin-left:15px;">
                  <span>在线状态：<span :style="{color:item.olStatus==1?'green':'red'}">{{item.olStatus_dictText }}</span></span><br/>
                  <span>启用状态：<span :style="{color:item.status==1?'green':'red'}">{{item.status_dictText}}</span></span>
                </div>
              </div>
            </a-card-meta>
            <template class="ant-card-actions" slot="actions">
              <a @click="handleWeatherData(item)" v-if="item.deviceType == '4'">实时数据</a>
              <a v-if="item.deviceType == '4'" @click="watchTrend(item)">实时走势</a>
              <a @click="handleEdit(item)">编辑</a>
              <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                <a>删除</a>
              </a-popconfirm>
            </template>
          </a-card>
        </template>
      </a-list-item>
    </a-list>
      <device-modal ref="modalForm" @ok="modalFormOk"></device-modal>
    <weather-modal ref="WeatherModal"></weather-modal>
    <trend-chart ref="trendChart"></trend-chart>
  </div> 
</template>

<script> 

 import { httpAction, getAction,deleteAction } from '@/api/manage'
 import DeviceModal from './modules/DeviceModal'
 import WeatherModal from './modules/WeatherModal'
 import TrendChart from './modules/TrendChart'

  export default {
    name: "CardList",
    components: {
      DeviceModal,
      WeatherModal,
      TrendChart
    },
    data () {
      return {
        description: '',
        linkList: [
          { icon: 'rocket', href: '#', title: '快速开始' },
          { icon: 'info-circle-o', href: '#', title: '产品简介' },
          { icon: 'file-text', href: '#', title: '产品文档' }
        ],
        extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
        dataSource:[]
      }
    },
    filters:{
      transDeviceType(type){
        switch(type){
          case '1':
            return '回路设备'
            break;
          case '2':
            return '路灯设备'
            break;
          case '3':
            return '工业设备'
            break;
          case '4':
            return '气象设备'
            break;
          case '5':
            return '监控设备'
            break;
          case '6':
            return 'Led设备'
            break;
        }
      }
    },
    created() { 
      this.loadData();
    }, 
    methods: {
      modalFormOk() {
        this.loadData();
      },
      // 查看走势
      watchTrend(record){
        this.$refs.trendChart.title = record.name;
        this.$refs.trendChart.open(record)
      },
      handleAdd(){
         this.$refs.modalForm.add();
        this.$refs.modalForm.title = "新增";
        this.$refs.modalForm.disableSubmit = false;
      },
      handleEdit(record) { 
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title = "编辑";
        this.$refs.modalForm.disableSubmit = false;
      },
      handleDetail(record){
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title="详情";
        this.$refs.modalForm.disableSubmit = true;
      },
      handleDelete(id) {
        var that = this;
        deleteAction("/corp/devicePkg/delete", {id: id}).then((res) => {
          if (res.success) { 
            that.$message.success(res.message);
            that.loadData();
          } else {
            that.$message.warning(res.message);
          }
        });
      },
      handleWeatherData(item){
        this.$refs.WeatherModal.open(item)
      },
      loadData(){
        var that = this;
        that.dataSource=[];
        httpAction("/corp/devicePkg/list",{pageNo:1,pageSize:100},"get").then((res)=>{
        if(res.success){ 
            var data = res.result.records;
            that.dataSource.push(data[0])
            for (let i = 0; i < data.length; i++) {
              that.dataSource.push(data[i])
            }
        }else{
          that.$message.warning(res.message);
        }
      }).finally(() => {
        that.confirmLoading = false;
      }) 
      }
    } 
  }
</script>

<style lang="less" scoped>
  .card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 48px;
  }

  .ant-card-actions {
    background: #f7f9fa;
    li {
      float: left;
      text-align: center;
      margin: 12px 0;
      color: rgba(0, 0, 0, 0.45);
      width: 50%;

      &:not(:last-child) {
        border-right: 1px solid #e8e8e8;
      }

      a {
        color: rgba(0, 0, 0, .45);
        line-height: 22px;
        display: inline-block;
        width: 100%;
        &:hover {
          color: #1890ff;
        }
      }
    }
  }

  .new-btn {
    background-color: #fff;
    border-radius: 2px;
    width: 100%;
    height: 186px;
  }

  .meta-content {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    height: 64px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
</style>